<template>
  <div id="hotel-order-new">
    <nav aria-label="breadcrumb" role="navigation" class="bg-white">
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><router-link to='/car/orders'>用车订单</router-link></li>
        <li class="breadcrumb-item active" aria-current="page">新建</li>
        <span class="ms-auto" @click.stop="back()">返回</span>
      </ol>
    </nav>       
    
    <div class="card">
      <div class="card-body bg-info text-white py-1">
        用车信息
      </div>                  
      <table class="table table-sm mb-0">
        <thead>
          <tr class="small">
              <th>用车城市</th>
              <th>用车类型</th>
              <th>用车日期</th>
              <th>用车时间</th>
              <th>出发地址</th>
              <th>到达地址</th>
              <th>车型</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <my-select-city :cityId.sync="cityId" :cityList="cityList"></my-select-city>
            </td>
            <td>
              <select class="form-select" v-model.number="useType">
                <option value="1">接机</option>
                <option value="2">送机</option>
                <option value="3">接火车</option>
                <option value="4">送火车</option>
                <option value="99">其它</option>
              </select>
            </td>
            <td><my-date-picker id="useDate" v-model="useDate"></my-date-picker></td>
            <td><input type="text" class="form-control" v-model="useTime" /></td>
            <td><input type="text" class="form-control" v-model="departureAddr" /></td>
            <td><input type="text" class="form-control" v-model="arrivalAddr" /></td>
            <td>
              <select class="form-select" v-model.number="vehicleTypeId">
                <option :value="info.id" v-for="info of vehicles" :key="info.id">{{info.name}}</option>
              </select>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="card-body bg-info text-white py-1">
        价格信息        
      </div>                  
      <table class="table table-sm">
        <tbody>
          <tr>
            <td>销售价<input type="text" class="form-control" v-model.number="price" /></td>
            <td>优惠金额<input type="text" class="form-control" v-model.number="discount" /></td>
            <td>服务费 <input type="text" class="form-control" v-model.number="serviceCharge" /></td>
            <td>成本价<input type="text" class="form-control" v-model.number="cost" /></td>
          </tr>
          <tr>
            <td>实收总额: <big class="text-success">{{totalAmount}}</big></td>
            <td>总成本: {{totalCost}}</td>
            <td>利润: <big class="text-danger">{{profit}}</big></td>            
          </tr>
        </tbody>
      </table>  
      <div class="card-body py-2">
        <select-customer 
          :customerId.sync="customerId"
          :costCenter.sync="costCenter"
          :projectName.sync="projectName"
        >          
        </select-customer>        
      </div>
      <div class="card-body py-2">
          
          <my-supplier-payment :supplierId.sync="supplierId" :supplierType="supplierType" :paymentMethodId.sync="paymentId"></my-supplier-payment>

          <div class="row  mb-1">
            <label class="col-3 control-label text-end">收款方式*</label>
            <div class="col-9">
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" value="1" v-model.number="payType">
                <label class="form-check-label">现金</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" value="2" v-model.number="payType">
                <label class="form-check-label">信用卡</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" value="4" v-model.number="payType">
                <label class="form-check-label">支票</label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" value="8" v-model.number="payType">
                <label class="form-check-label">账单</label>
              </div>
            </div>
          </div>
          <div class="row  mb-1">
            <label class="col-3 control-label text-end">收款备注</label>
            <div class="col-9">
              <my-select-income :incomeRemark.sync="payRemark"></my-select-income>
              <span class="small text-muted">客户付款的具体途径</span>
            </div>
          </div>

            <div class="row mb-1">
              <label class="col-3 control-label text-end">联系人*</label>
              <div class="col-9">
                <input type="text" class="form-control" v-model.trim="linkman" />
              </div>
            </div>
            <div class="row mb-1">
              <label class="col-3 control-label text-end">联系电话*</label>
              <div class="col-9">
                <input type="text" class="form-control" v-model.trim="linkPhone" />
              </div>
            </div>
          
          <div class="row  mb-1">
              <label class="control-label col-3 text-end">
                  备注    
              </label>
              <div class="col-9">
                  <input type="text" class="form-control" v-model="remark" />
              </div>
          </div>
      </div>
      <div class="card-footer text-center">
        <button type="button" class="btn btn-success btn-lg" @click.stop="save($event.target)">保存</button>
        <button type="button" class="btn btn-secondary btn-sm ms-5" @click.stop="cancel()">取消</button>
      </div>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import moment from "moment";
import { SUPPLIER_CAR } from "@/common/const.js";
import { createCarOrder } from "@/api/rentalcar.js";
import { searchNotesByCustomer } from "@/api/customer.js";
import { getAllCity } from "@/api/hotel.js";
import { searchVehicleGroupInfos } from "@/api/basic-data.js";

import MyDatePicker from "@/components/my-datepicker.vue";
import MySelectIncome from "@/components/my-select-income.vue";

import SelectCustomer from "@/components/select-customer-costcenter.vue";
import MySupplierPayment from "@/components/my-supplier-payment.vue";
import MySelectCity from "@/components/my-select2-city.vue";

export default {
  props: {
    id: {
      type: String,
      default: "modalPrompt",
    },
  },
  components: {
    MyDatePicker,
    MySelectIncome,

    SelectCustomer,
    MySupplierPayment,
    MySelectCity,
  },
  data() {
    return {
      supplierId: 0,
      paymentId: 0,

      customerId: 0,
      costCenter: "",
      projectName: "",
      cityName: "",
      cityId: 0,
      useType: 1,
      useDate: "",
      useTime: "",
      departureAddr: "",
      arrivalAddr: "",
      vehicleTypeId: 0,
      price: 0,
      discount: 0,
      cost: 0,
      serviceCharge: 0,
      linkman: "",
      linkPhone: "",
      remark: "",
      payType: 8,
      payRemark: "",
      count: 0,
      totalAmount: 0,
      totalCost: 0,
      profit: 0,

      cityList: [],
      vehicles: [],
    };
  },
  computed: {
    supplierType: function () {
      return SUPPLIER_CAR;
    },
  },
  watch: {
    serviceCharge: function () {
      this.calc();
    },
    price: function () {
      this.calc();
    },
    cost: function () {
      this.calc();
    },
    cityId: function () {
      console.log(this.cityId);
      this.getCityName();
    },
  },
  mounted: function () {
    this.getAllCity();
    this.searchVehicles();
  },
  methods: {
    back: function () {
      this.$router.go(-1);
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    init: function () {
      // this.cityId = 2
      this.customerId = 0;
      this.useDate = "2021-01-15";
      this.useTime = "18:30";
      this.departureAddr = "上海南站";
      this.arrivalAddr = "上海浦东机场";
      // this.roomType = "标准间"

      this.linkman = "william";
      this.linkPhone = "1306173";

      this.calc();
    },
    getAllCity: function () {
      getAllCity((v) => {
        this.cityList = v;
        this.$nextTick(function () {
          this.init();
        });
      });
    },
    searchVehicles: function () {
      const params = {
        "sc.pageSize": 1000,
        "sc.pageNo": 1,
      };
      searchVehicleGroupInfos(params, (v) => {
        this.vehicles = v.dataList;
      });
    },
    save: function (btn) {
      $(btn).attr("disabled", true);
      const params = {
        customerId: this.customerId,
        costCenter: this.costCenter,
        projectName: this.projectName,
        cityId: this.cityId,
        cityName: this.cityName,
        useType: this.useType,
        useDate: this.useDate,
        useTime: this.useTime,
        departureAddress: this.departureAddr,
        arrivalAddress: this.arrivalAddr,
        vehicleTypeId: this.vehicleTypeId,
        price: this.price,
        discount: this.discount,
        cost: this.cost,
        serviceCharge: this.serviceCharge,
        linkman: this.linkman,
        linkPhone: this.linkPhone,
        remark: this.remark,
        supplierId: this.supplierId,
        paymentMethodId: this.paymentId,
        payType: this.payType,
        payRemark: this.payRemark,
        count: this.count,
        totalAmount: this.totalAmount,
        totalCost: this.totalCost,
        profit: this.profit,
      };

      createCarOrder(
        JSON.stringify(params),
        (v) => {
          console.log(v);
          if (v.status !== "OK") {
            this.showErrMsg(v.errmsg, "danger");
          } else {
            this.showErrMsg("创建成功");
            const url = "/car/order/" + v.returnCode;
            console.log(url);
            this.$router.push(url);
          }
        },
        () => {
          $(btn).attr("disabled", false);
        }
      );
    },
    calc: function () {
      this.totalAmount = this.price + this.serviceCharge - this.discount;
      this.totalAmount = Math.round(this.totalAmount * 100) / 100;

      this.totalCost = this.cost;
      this.totalCost = Math.round(this.totalCost * 100) / 100;

      this.profit = this.totalAmount - this.totalCost;
      this.profit = Math.round(this.profit * 100) / 100;
    },
    getCityName: function () {
      for (let cityInfo of this.cityList) {
        if (cityInfo.id === this.cityId) {
          this.cityName = cityInfo.cityName;
          console.log(this.cityId + ", " + this.cityName);
          break;
        }
      }
    },
  },
};
</script>
